﻿<%@ WebHandler Language="C#" Class="AjaxCompute" %>

using System;
using System.Collections;
using System.Collections.Generic;
using System.Web;

using monadsphere.ashx;
using monadsphere.js;
using monadsphere.dom;
using monadsphere.dom.events;
using monadsphere.dom.html2;
using monadsphere.demo.compute;

/// <summary>
/// This class demonstrate how components can be created based on JSVar
/// </summary>
public class AjaxCompute: JSHandler {

    public override void process(HttpContext context, Hashtable data) {
        HTMLDocument doc = HTMLDocument.instance;
        HTMLElement root = doc.body;

        HTMLDivElement form = doc.createElement<HTMLDivElement>();
        form.textContent = "This demostrates the same as in component-compute, " +
            "except that two input values are sent to server and update " +
            "javascript is returned from server to display the computation result.";
        root.appendChild(form);

        // the component
        ComputeComponent f = doc.createElement<ComputeComponent>();
        f.id = "compute-component";
        f.style.height = "50px";
        f.style.padding = "5px";
        f.style.backgroundColor = "beige";
        f.style.border = "1px solid red";

        root.appendChild(f);

        // adds event handler for oncompute event
        f.oncompute = new HtmlEventHandler<EventListener<ComputeComponent>>(display, false);
    }

    /// <summary>
    /// displays computation value in an alert window
    /// </summary>
    /// <param name="e"></param>
    protected void display(Event<ComputeComponent> e) {
        ComputeComponent a = e.target;
        HTMLInputElement input1 = a.getProperty<HTMLInputElement>("input1");
        HTMLInputElement input2 = a.getProperty<HTMLInputElement>("input2");

        JSNumber number1 = JSNumber.parseFloat(input1.value);
        JSNumber number2 = JSNumber.parseFloat(input2.value);

        // JSON object sending to server
        JSObject data = new JSObject();
        data["input1"] = number1;
        data["input2"] = number2;

        // send data to server
        remoteCall("compute", data);
    }
}
